<template>
  <ag-grid-vue
    ref="grid"
    :columnDefs="columnDefs"
    :rowData="rowData"
    :editable="true"
    row-selection="multiple"
    :style="{ height: gridHeight }"
    :pagination="false"
    :getRowNodeId="function(params){return params.minTmpid}"
    class="ag-theme-material"
    @grid-ready="onGridReady"
    @cellClicked="cellClicked"
  ></ag-grid-vue>
</template>
<script>
import ProductionEditor from '@/components/CellEditor/ProductionEditor'
import ProductionRenderer from '@/components/CellRenderer/ProductionRenderer'
import NumberEditor from '@/components/CellEditor/NumberEditor'
import CurrencyRenderer from '@/components/CellRenderer/CurrencyRenderer'
import BooleanRenderer from '@/components/CellRenderer/BooleanRenderer'
import BooleanEditor from '@/components/CellEditor/BooleanEditor'

import { AgGridVue } from 'ag-grid-vue'
import { getPrice } from '@/api/custprice'

export default {
  components: {
    AgGridVue,
    ProductionEditor,
    ProductionRenderer,
    NumberEditor,
    CurrencyRenderer,
    BooleanEditor,
    BooleanRenderer
  },
  props: ['rowData', 'status'],
  data() {
    let that = this
    return {
      frameworkComponents: null,
      gridHeight: '',
      gridApi: null,
      columnApi: null,
      enterDisable: false,

      columnDefs: [
        {
          headerName: '',
          field: 'chk',
          width: 50,
          checkboxSelection: true
        },
        {
          headerName: '产品',
          field: 'ProductionId',
          resizable: true,
          sortable: true,
          filter: true,
          cellEditorFramework: 'ProductionEditor',
          cellRendererFramework: 'ProductionRenderer',
          cellEditorParams: {
            cellUpdateHandler: this.productionUpdated,
            selectVisableChange: this.selectVisableChange
          },
          suppressKeyboardEvent: function(params) {
            const suppress =
              params.editing && params.event.keyCode === 13 && that.enterDisable
            return suppress
          },
          editable: true
        },
        {
          headerName: '品号',
          resizable: true,
          field: 'ProductionCode',
          sortable: true,
          filter: true
        },
        {
          headerName: '旧编号',
          field: 'OldNumber',
          sortable: true,
          filter: true,
          resizable: true,
          editable: false
        },
        {
          headerName: '销售级别',
          field: 'SaleLv',
          resizable: true,
          sortable: true,
          filter: true,
          editable: true
        },
        {
          headerName: '物料分组',
          field: 'GroupName',
          sortable: true,
          filter: true,
          resizable: true,
          editable: false
        },
        {
          headerName: '规格',
          resizable: true,
          field: 'ProductionStd',
          sortable: true,
          filter: true
        },
        {
          headerName: '确认单价',
          resizable: true,
          field: 'Price',
          sortable: true,
          filter: true,
          cellRendererFramework: 'CurrencyRenderer'
        },
        {
          headerName: '数量',
          resizable: true,
          field: 'Qty',
          sortable: true,
          filter: true,
          editable: true,
          cellEditorFramework: 'NumberEditor',
          cellEditorParams: {
            cellUpdateHandler: this.qtyUpdated
          }
        },
        {
          headerName: '简码',
          resizable: true,
          field: 'ShortCode',
          sortable: true,
          filter: true
        },
        {
          headerName: '单位',
          field: 'Unit',
          resizable: true,
          sortable: true,
          filter: true
        },
        {
          headerName: '包装单位',
          field: 'PUnit',
          resizable: true,
          sortable: true,
          filter: true,
          editable: false
        },
        {
          headerName: '按包装单位下单',
          field: 'OrderUnit',
          sortable: true,
          resizable: true,
          filter: true,
          editable: true,
          cellRendererFramework: 'BooleanRenderer',
          cellEditorFramework: 'BooleanEditor',
          cellEditorParams: {
            cellUpdateHandler: this.unitUpdated
          }
        },
        {
          headerName: '确认小计',
          field: 'Amount',
          sortable: true,
          filter: true,
          resizable: true,
          cellRendererFramework: 'CurrencyRenderer'
        },
        {
          headerName: '备注',
          field: 'Note',
          resizable: true,
          sortable: true,
          filter: true,
          editable: true
        }
      ]
    }
  },
  watch: {
    rowData: function(value) {
      this.autoSizeCloumns()
    }
  },
  methods: {
    productionUpdated(param) {
      let rowEdit = this.rowData[this.getFocused().rowIndex]
      rowEdit.FUnit = param.FUnit
      rowEdit.SaleLv = param.SaleLv
      rowEdit.ProductionCode = param.Code
      rowEdit.ProductionName = param.Name
      rowEdit.ProductionStd = param.Specification
      rowEdit.Unit = param.Unit
      rowEdit.ShortCode = param.ShortCode
      rowEdit.OldNumber = param.OldNumber
	  rowEdit.PUnitCode = param.PUnitCode
	  rowEdit.UnitCode = param.UnitCode
      rowEdit.PUnit = param.PUnit
      rowEdit.GroupName = param.GroupName
      rowEdit.OrderUnit = false
      rowEdit.Price = 0
      rowEdit.Amount = 0
      getPrice(param.AutoId, param.Unit, null)
        .then(response => {
          if (response.Result === 0) {
            rowEdit.Price = response.Data.FPrice
            rowEdit.Amount = rowEdit.Price * rowEdit.Qty
          } else {
          }
        })
        .catch(error => {
          this.$alert(error, '错误')
        })
    },
    qtyUpdated(param) {
      let rowEdit = this.rowData[this.getFocused().rowIndex]
      rowEdit.Amount = rowEdit.Price * param
    },
    unitUpdated(param) {
      let rowEdit = this.rowData[this.getFocused().rowIndex]
      let unit = ''
      if (param) {
        unit = rowEdit.PUnit
      } else {
        unit = rowEdit.Unit
      }
      getPrice(rowEdit.ProductionId, unit, null)
        .then(response => {
          if (response.Result === 0) {
            rowEdit.Price = response.Data.FPrice
            rowEdit.Amount = rowEdit.Price * rowEdit.Qty
			this.gridApi.updateRowData(rowEdit)
          } else {
          }
        })
        .catch(error => {
          this.$alert(error, '错误')
        })
    },
    selectVisableChange(param) {
      this.enterDisable = param
    },
    onGridReady(params) {
      this.gridApi = params.api
      this.columnApi = params.columnApi
    },
    autoSizeCloumns() {
      var allColumnIds = []
      this.columnApi.getAllColumns().forEach(function(column) {
        allColumnIds.push(column.colId)
      })
      this.columnApi.autoSizeColumns(allColumnIds)
      this.$nextTick(() => {
        this.columnApi.autoSizeColumns(allColumnIds)
      })
    },
    getSelected() {
      const selectedNodes = this.gridApi.getSelectedNodes()
      const selectedData = selectedNodes.map(node => node.data)
      return selectedData
    },
    cellClicked(params) {},
    commit() {
      this.gridApi.stopEditing(false)
    },
    stopEditing() {
      this.gridApi.stopEditing(true)
    },
    getEditStatus() {
      return this.gridApi.getEditingCells()
    },
    getFocused() {
      const fcell = this.gridApi.getFocusedCell()
      let rowIdx = -1
      if (fcell !== null) rowIdx = fcell.rowIndex
      return { rowIndex: rowIdx, rows: this.rowData.length }
    }
  },
  mounted() {
    this.gridHeight = window.innerHeight - 330 + 'px'
    const that = this
    window.onresize = function changeGridSize() {
      that.gridHeight = window.innerHeight - 330 + 'px'
    }
  }
}
</script>

<style lang="scss">
@import "../../../node_modules/ag-grid-community/dist/styles/ag-grid.css";
@import "../../../node_modules/ag-grid-community/dist/styles/ag-theme-balham.css";
@import "../../../node_modules/ag-grid-community/dist/styles/ag-theme-material.css";
</style>
